<template>
  <input
    type="text"
    placeholder="请输入待办事项"
    v-model="text"
    @keydown.enter="addTodo"
  />
</template>

<script>
export default {
  name: "TodoInput",
  data() {
    return {
      text: "",
    };
  },
  methods: {
    addTodo() {
      console.log(11111111);
      this.$bus.$emit("todoAddEvent", this.text);

      this.text = "";
    },
  },
};
</script>

<!-- scoped 局部 css ，当前组件生效，不会影响其他组件 -->
<style lang="scss" scoped>
input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #333;
  outline: none;
  padding: 0 10px;
}
</style>